<template>
  <el-card class="content">
    <div slot="header" class="clearfix">
      <span>公告管理</span>
    </div>
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="addFormDialogVisible=true">添加</el-button>
      <el-input v-model="searchParams.content" placeholder="请输入公告名称" style="width: 30%;margin-left: 10px;margin-right: 10px;"></el-input>
      <el-button type="primary" @click="getMessage">查找</el-button>
    </div>
    <el-alert
        title="用户页面仅展示最新的一条公告，及最近创建的一条"
        type="success"
        effect="dark"
    style="margin-bottom: 10px;width: 20%">
    </el-alert>
    <el-table
        :data="tableValue"
        border>
      <el-table-column
          prop="id"
          label="id"
      >
      </el-table-column>
      <el-table-column
          label="展示图"
      >
        <template slot-scope="scope">
            <img style="height: 60px;width: 60px" :src="scope.row.img">
        </template>
      </el-table-column>
      <el-table-column
          prop="content"
          label="内容"
      >
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 20px">
      <el-pagination
          :page-size="this.searchParams.pageSize"
          :current-page="this.searchParams.pageNum"
          layout="prev, pager, next"
          :total="this.total"
          @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <el-dialog
        title="添加公告"
        :visible.sync="addFormDialogVisible"
        width="40%"
        center>
      <el-form label-position="left" label-width="80px" :model="newMessage">
        <el-form-item label="公告内容">
          <el-input v-model="newMessage.content"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              class="upload-demo"
              drag
              :action="this.$store.state.uploadUrl"
              :on-success="upload"
              :multiple-limit="1"
          multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-button @click="addFormDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addMessage">确 定</el-button>
    </el-dialog>
    <el-dialog
        title="更新分类"
        :visible.sync="updateFormDialogVisible"
        width="40%"
        center>
      <el-form label-position="left" label-width="80px" :model="updateMessage">
        <el-form-item label="分类名">
          <el-input v-model="updateMessage.content"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              class="upload-demo"
              drag
              :action="this.$store.state.uploadUrl"
              :on-success="upload"
              :multiple-limit="1"
              multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-button @click="updateFormDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="messageUpdate">确 定</el-button>
    </el-dialog>
  </el-card>

</template>

<script>
import {addMessage, deleteMessage, messageSearch, messageSearchByPage, updateMessage} from "@/api/messageApi";

export default {
  name: "MessageInfo",
  data(){
    return{
      searchParams:{
        pageNum:1,
        pageSize:5,
        content:""
      },
      newMessage:{ content:"",img:""},
      updateMessage:{},
      tableValue:[],
      total:0,
      img:"",
      addFormDialogVisible:false,
      updateFormDialogVisible:false
    }
  },
  methods:{
    getMessage(){
      messageSearchByPage(this.searchParams).then(res=>{
        if (res.code===200){
          this.tableValue=res.data.records;
          this.total=res.data.total;
        }
      })
    },
    upload(res, file, fileList){
      this.img=res.data;
    },
    addMessage(){
        this.newMessage.img=this.img;
        addMessage(this.newMessage).then(res=>{
          if (res.code===200){
            this.getMessage();
            this.addFormDialogVisible=false;
          }
        })
    },
    messageUpdate(){
        this.updateMessage.img=this.img;
        updateMessage(this.updateMessage).then(res=>{
          if (res.code===200){
            this.getMessage();
            this.updateFormDialogVisible=false;
          }
        })
    },
    handleUpdate(message){
      this.updateMessage=message;
      this.img=message.img;
      this.updateFormDialogVisible=true;
    },
    handleDelete(id){
        deleteMessage(id).then(res=>{
            if (res.code===200){
              this.getMessage();
            }
        })
    },
    handleCurrentChange(val) {
      this.searchParams.pageNum=val;
      this.getMessage();
    }
  },
  mounted() {
    this.getMessage();
  }
}
</script>

<style scoped>

</style>
